<template>
	<div class="system-role-dialog-container system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search">
				<el-row :gutter="20">
					<el-col :span="24">
						<el-select size="default" placeholder="请选择字典类型" v-model="state.tableData.param.dictType"
							v-auth="'system:dict:query'" @change="getTableData()" class="mt10">
							<el-option v-for="item in state.tableData.optionselect" :key="item.dictType"
								:label="item.dictName" :value="item.dictType"></el-option>
						</el-select>
						<el-input size="default" placeholder="字典标签" v-model="state.tableData.param.dictLabel"
							v-auth="'system:dict:query'" class="mt10"></el-input>
						<el-select v-model="state.tableData.param.status" placeholder="字典状态" clearable size="default"
							class="mt10" v-auth="'system:dict:query'">
							<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
						<el-button size="default" class="mt10" type="primary" plain @click="getTableData()"
							v-auth="'system:dict:query'">
							<el-icon>
								<ele-Search />
							</el-icon>
							搜索
						</el-button>
						<el-button size="default" class="mt10" type="info" plain @click="resetParamData()"
							v-auth="'system:dict:query'">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
						<el-button size="default" class="mt10" type="success" plain v-auth="'system:dict:add'"
							@click="onOpenAddDict('add')">
							<el-icon><ele-Plus /></el-icon>
							新增
						</el-button>
						<el-button size="default" class="mt10" type="warning" plain v-auth="'system:dict:export'"
							@click="handleExport">
							<el-icon>
								<ele-Upload />
							</el-icon>
							导出
						</el-button>
					</el-col>
				</el-row>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"
				ref="multipleTableRef">
				<el-table-column prop="dictCode" label="字典Id" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column prop="dictLabel" label="标签" width="100" show-overflow-tooltip></el-table-column>
				<el-table-column prop="dictValue" label="键值" show-overflow-tooltip></el-table-column>
				<el-table-column prop="dictSort" label="排序" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="状态" show-overflow-tooltip>
					<template #default="scope">
						<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100" fixed="right">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEditDict('edit', scope.row)"
							v-auth="'system:dict:edit'">修改</el-button>
						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum" background
				v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total">
			</el-pagination>
		</el-card>
		<EditDictData ref="EditDictDataRef" @refresh="getTableData" />
	</div>
</template>

<script setup lang="ts" name="authRoleUser">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { useDictData } from '/@/api/system/dict/data';
import { useDictType } from '/@/api/system/dict/type';
import { ElMessage, ElMessageBox, ElTable } from 'element-plus';
import { useRoute } from 'vue-router';
import { download } from '/@/utils/tool';
import { useDict } from '/@/utils/dict';

const { sys_normal_disable } = useDict("sys_normal_disable");

const EditDictData = defineAsyncComponent(() => import('/@/views/system/dict/editDictData.vue'));
const EditDictDataRef = ref();


const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const state = reactive({
	tableData: {
		data: [],
		optionselect: [] as RowDictType[],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
			dictType: '',
			dictName: '',
			dictLabel: '',
			status: '',
		},
	},
});

/**
 * 初始化表格数据
 * @Api listUser（获取字典数据列表）
 * @Api listData（获取字典类型列表）
 * @param {Object} state.tableData.param
 */
const getTableData = () => {
	useDictData().listData(state.tableData.param).then((res: any) => {
		state.tableData.data = res.rows;
		state.tableData.total = res.total;
	});
};

const getOptionselect = () => {
	useDictType().optionselect().then((res: any) => {
		state.tableData.optionselect = res.data;
	});
};

/**
 * 接收Route传递的参数
 * @param {Object} route.query.dictId
 * @method getTableData
 * @description 根据dictId获取已经分配的用户列表
 */
const route = useRoute();
state.tableData.param.dictType = route.query.dictType as string;
if (state.tableData.param.dictType !== '') {
	getTableData();
	getOptionselect();
}

/**
 * 打开新增字典弹窗
 * @param type
 * @param data 字典树数据
 */
const onOpenAddDict = (type: string) => {
	EditDictDataRef.value.openDialog(type, {}, state.tableData.param.dictType);
};
/**
 * 打开编辑字典弹窗
 * @param type
 * @param row 当前行数据
 */
const onOpenEditDict = (type: string, row: RowDictDataType) => {
	EditDictDataRef.value.openDialog(type, row, state.tableData.param.dictType);
};

/**
 * 删除字典
 * @param row 当前行数据
 */
const onTabelRowDel = (row: RowPostType) => {
	ElMessageBox.confirm('此操作将永久删除该字典, 是否继续?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		useDictData().delData(row.dictCode).then(() => {
			getTableData();
			ElMessage.success('删除成功');
		});
	});
};


/**
 * 重置表格数据
 */
const resetParamData = () => {
	state.tableData.param = {
		pageNum: 1,
		pageSize: 10,
		dictType: state.tableData.param.dictType,
		dictName: '',
		dictLabel: '',
		status: '',
	};
	getTableData();
};


/** 导出按钮操作 */
const handleExport = () => {
	download('system/dict/data/export', {
		...state.tableData.param,
	}, `data_${new Date().getTime()}.xlsx`)
}

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}

		.layout-padding-auto {
			padding: 0 0;

			.system-user-search {
				margin: 0 0;
			}
		}
	}
}

.mt10 {
	max-width: 140px;
	margin: 10px 0 10px 10px;
}</style>
